<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Bath Therapy</title>
<link type="text/css" href="/css/jquery-ui-1.8.1.custom.css"
	rel="stylesheet" />
<link rel="stylesheet" type="text/css" media="screen" href="/css/ui.jqgrid.css" />
<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.8.1.custom.min.js"></script>
<script src="/js/grid.locale-en.js" type="text/javascript"></script>
<script src="/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript">
	$(function(){
		var addProductDialog = $("#AddProductDialog").dialog({
			title:"Add New Product",
			autoOpen:false,
			resizable:false,
			height:480,
			width:640,
			modal:true,
			buttons:{
				"Cancel":function(){
					$(this).dialog("close");
				},
				"OK":function(){
					$(this).dialog("close");
				}
			}
		});
		$("#AddProduct").button().click(function(){
			// Pop up Add Product Dialog.
			addProductDialog.dialog("open");
		});
		var addOrderDialog = $("#AddOrderDialog").dialog({
			title:"Add New Order",
			autoOpen:false,
			resizable:false,
			height:480,
			width:1020,
			modal:true,
			buttons:{
				"Cancel":function(){
					$(this).dialog("close");
				},
				"OK":function(){
					$(this).dialog("close");
				}
			}
		});
		$("#AddOrder").button().click(function(){
			// Pop up Add Product Dialog.
			addOrderDialog.dialog("open");
		});
		$("#SubmissionDate").datepicker();
		$("#ExpiryDate").datepicker({altFormat:"mm/yyyy"});
		$("#AddCategory").button();
		$("#ImportProduct").button();
		$("#ExportProduct").button();
		$("#AddOrderSearchProductButton").button();
		$("#AddOrderAddCustomer").button();
		$("#ProductTabs").tabs();
		$("#OrderTabs").tabs();
		$("#AddOrderTabs").tabs({selected:0});
		$("#Tabs").tabs();
		var addOrderCustomerList = $("#AddOrderCustomerList").jqGrid({
		    url:'GetCustomers',
		    datatype: 'json',
		    mtype: 'GET',
		    colNames:['First Name','Last Name', 'Phone Number','Email','# of Address','Status'],
		    colModel :[ 
		      {name:'firstName', index:'firstName', width:200}, 
		      {name:'lastName', index:'lastName', width:200}, 
		      {name:'phoneNumber', index:'phoneNumber', width:120}, 
		      {name:'email', index:'email', width:280}, 
		      {name:'numAddress', index:'numAddress', width:80}, 
		      {name:'status', index:'status',width:80}
		    ],
		    onSelectRow: function(id){
		    	alert("On Row Select:"+id);
	      	},
	      	jsonReader : { 
	            root: "rows", 
	            page: "page", 
	            total: "total", 
	            records: "records", 
	            repeatitems: true, 
	            cell: "cell", 
	            id: "id",
	            userdata: "userdata",
	            subgrid: { 
	               root:"rows", 
	               repeatitems: true, 
	               cell:"cell" 
	            } 
	         },
		    pager: '#AddOrderCustomerListPager',
		    height:"auto",
		    rowNum:20,
		    rowList:[10,20,30],
		    sortname: 'firstName',
		    sortorder: 'asc',
		    viewrecords: true,
		    caption: 'Customer List'
		 });  
		$("#AddOrderProductList").jqGrid({
		    url:'GetProducts',
		    datatype: 'json',
		    mtype: 'GET',
		    colNames:['Serial','UPC', 'Name','Status','Unit Price','Unit Discount','Description'],
		    colModel :[ 
		      {name:'serial', index:'serial', width:120}, 
		      {name:'upc', index:'upc', width:120}, 
		      {name:'name', index:'name', width:180}, 
		      {name:'status', index:'status', width:110}, 
		      {name:'unitPrice', index:'unitPrice', width:80}, 
		      {name:'unitDiscount', index:'unitDiscount',width:100}, 
		      {name:'description', index:'description',width:220,sortable:'false'}
		    ],
		    onSelectRow: function(id){
		    	alert("On Row Select:"+id);
	      	},
	      	jsonReader : { 
	            root: "rows", 
	            page: "page", 
	            total: "total", 
	            records: "records", 
	            repeatitems: true, 
	            cell: "cell", 
	            id: "id",
	            userdata: "userdata",
	            subgrid: { 
	               root:"rows", 
	               repeatitems: true, 
	               cell:"cell" 
	            } 
	         },
		    pager: '#AddOrderProductListPager',
		    height:"auto",
		    rowNum:10,
		    rowList:[10,20,30],
		    sortname: 'serial',
		    sortorder: 'asc',
		    viewrecords: true,
		    caption: 'Product List'
		 }); 
		$("#ProductList").jqGrid({
		    url:'GetProducts',
		    datatype: 'json',
		    mtype: 'GET',
		    colNames:['Serial','UPC', 'Name','Status','Unit Price','Unit Discount','Description'],
		    colModel :[ 
		      {name:'serial', index:'serial', width:120}, 
		      {name:'upc', index:'upc', width:120}, 
		      {name:'name', index:'name', width:200}, 
		      {name:'status', index:'status', width:120}, 
		      {name:'unitPrice', index:'unitPrice', width:80}, 
		      {name:'unitDiscount', index:'unitDiscount',width:100}, 
		      {name:'description', index:'description',width:280,sortable:'false'}
		    ],
		    onSelectRow: function(id){
		    	alert("On Row Select:"+id);
	      	},
	      	jsonReader : { 
	            root: "rows", 
	            page: "page", 
	            total: "total", 
	            records: "records", 
	            repeatitems: true, 
	            cell: "cell", 
	            id: "id",
	            userdata: "userdata",
	            subgrid: { 
	               root:"rows", 
	               repeatitems: true, 
	               cell:"cell" 
	            } 
	         },
		    pager: '#ProductListPager',
		    height:"auto",
		    rowNum:20,
		    rowList:[10,20,30],
		    sortname: 'serial',
		    sortorder: 'asc',
		    viewrecords: true,
		    caption: 'Product List'
		 }); 

		$("#PendingOrderList").jqGrid({
		    url:'example.php',
		    datatype: 'json',
		    mtype: 'GET',
		    colNames:['Order Id','Customer Name', 'Pending Hours','Submission Date','Special Instructions','Credit Check','Items','Subtotal'],
		    colModel :[ 
		      {name:'orderId', index:'orderId', width:120}, 
		      {name:'customerName', index:'customerName', width:260}, 
		      {name:'pendingHours', index:'pendingHours', width:120}, 
		      {name:'submissionDate', index:'submissionDate', width:140}, 
		      {name:'specialInstructions', index:'specialInstructions', width:80,sortable:'false'}, 
		      {name:'creditCheck', index:'creditCheck',width:80}, 
		      {name:'items', index:'items',width:80}, 
		      {name:'subtotal', index:'subtotal',width:140}
		    ],
		    pager: '#PendingOrderListPager',
		    rowNum:18,
		    rowList:[10,20,30],
		    sortname: 'serial',
		    sortorder: 'asc',
		    viewrecords: true,
		    caption: 'Pending Order List'
		 }); 

		$("#CanceledOrderList").jqGrid({
		    url:'example.php',
		    datatype: 'json',
		    mtype: 'GET',
		    colNames:['Order Id','Customer Name', 'Last Modified Date','Last Modified User','Items','Subtotal'],
		    colModel :[ 
 		      {name:'orderId', index:'orderId', width:120}, 
		      {name:'customerName', index:'customerName', width:260}, 
		      {name:'lastModifiedDate', index:'lastModifiedDate', width:180}, 
		      {name:'lastModifiedUser', index:'lastModifiedUser',width:260}, 
		      {name:'items', index:'items',width:80}, 
		      {name:'subtotal', index:'subtotal',width:140}
		    ],
		    pager: '#CanceledOrderListPager',
		    rowNum:18,
		    rowList:[10,20,30],
		    sortname: 'serial',
		    sortorder: 'asc',
		    viewrecords: true,
		    caption: 'Canceled Order List'
		 }); 

		$("#CompletedOrderList").jqGrid({
		    url:'example.php',
		    datatype: 'json',
		    mtype: 'GET',
		    colNames:['Order Id','Customer Name', 'Last Modified Date','Last Modified User','Items','Subtotal'],
		    colModel :[ 
		      {name:'orderId', index:'orderId', width:120}, 
		      {name:'customerName', index:'customerName', width:260}, 
		      {name:'lastModifiedDate', index:'lastModifiedDate', width:180}, 
		      {name:'lastModifiedUser', index:'lastModifiedUser',width:260}, 
		      {name:'items', index:'items',width:80}, 
		      {name:'subtotal', index:'subtotal',width:140}
		    ],
		    pager: '#CompletedOrderListPager',
		    rowNum:18,
		    rowList:[10,20,30],
		    sortname: 'serial',
		    sortorder: 'asc',
		    viewrecords: true,
		    caption: 'Completed Order List'
		 }); 
	});
</script>
  </head>
  <body>
  <div id="Tabs">
  	<ul>
  		<li><a href="#Dashboard">Dashboard</a></li>
  		<li><a href="#Order">Order</a></li>
  		<li><a href="#Product">Product</a></li>
  		<li><a href="#Store">Store</a></li>
  	</ul>
  	<div id="Dashboard">
  		Display dashboard of the following:
  		<ul>
  			<li>Number of customers</li>
  			<li>Sales This Month</li>
  			<li>Sales Last Month</li>
  			<li>Sales This FY</li>
  			<li>Sales Last FY</li>
  			<li>Top 10 Product Sold</li>
  			<li>Top 10 Product Not Sold</li>
  			<li>Top 10 Customer (by Purchase Amount)</li>
  			<li>Top 10 Customer Without Purchase</li>
  		</ul>
  	</div>
  	<div id="Order">
	  	<div id="OrderTabs">
		  	<ul>
		  		<li><a href="#PendingOrder">Pending</a></li>
		  		<li><a href="#CanceledOrder">Canceled Order</a></li>
		  		<li><a href="#CompletedOrder">Completed Order</a></li>
		  	</ul>
		  	<div id="PendingOrder">
		  		<table>
		  			<tr>
		  				<td>
		  				<button id="AddOrder">Add</button>
		  				<div id="AddOrderDialog">
		  					<div id="AddOrderTabs">
		  						<ul>
		  							<li><a href="#AddOrderCustomer">Customer</a></li>
		  							<li><a href="#AddOrderItems">Items</a></li>
		  							<li><a href="#AddOrderPayment">Payment</a></li>
		  							<li><a href="#AddOrderShipping">Shipping</a></li>
		  							<li><a href="#AddOrderSpecialInstructions">Special Instructions</a></li>
		  							<li><a href="#AddOrderNote">Note</a></li>
		  						</ul>
				  				<form id="AddOrderForm">
		  						<div id="AddOrderCustomer">
	  									<button id="AddOrderAddCustomer">Add</button>
				  						<table>
				  							<tr>
				  								<td><label for="CustomerName">Customer Name*</label></td>
				  								<td><input id="CustomerName" name="CustomerName" type="text" size="80" maxlength="500"/></td>
			  								</tr>
				  							<tr>
				  								<td colspan="2">
											  		<table id="AddOrderCustomerList"></table>
											  		<div id="AddOrderCustomerPager"></div>
										  		</td>
			  								</tr>
			  								<tr>
			  									<td colspan="2">* Mandatory</td>
			  								</tr>
				  						</table>
		  						</div>
		  						<div id="AddOrderItems">
	  								<label for="AddOrderSearchProduct">Search Product:</label><input id="AddOrderSearchProduct" name="AddOrderSearchProduct" type="text" size="100"/><button id="AddOrderSearchProductButton">Search</button><br/>
							  		<table id="AddOrderProductList"></table>
							  		<div id="AddOrderProductPager"></div>
		  						</div>
		  						<div id="AddOrderPayment">
		  							<table>
			  							<tr>
			  								<td><label for="PaymentMethod">Payment Method*</label></td>
			  								<td>
			  									<select id="PaymentMethod" name="PaymentMethod">
			  										<option value="VISA">VISA</option>
			  										<option value="Master">Master</option>
			  										<option value="PayPal">PayPal</option>
			  									</select>
			  								</td>
	  									</tr>
			  							<tr>
			  								<td><label for="CardHolderName">Card Holder Name*</label></td>
			  								<td>
			  									<input id="CardHolderName" name="CardHolderName" type="text" size="100" maxlength="100"/>
			  								</td>
	  									</tr>
			  							<tr>
			  								<td><label for="CardNumber">Card Number*</label></td>
			  								<td>
			  									<input id="CardNumber" name="CardNumber" type="text" size="18" maxlength="16"/>
			  								</td>
	  									</tr>
			  							<tr>
			  								<td><label for="CardSecureNumber">Card Secure Number*</label></td>
			  								<td>
			  									<input id="CardSecureNumber" name="CardSecureNumber" type="text" size="5" maxlength="3"/>
			  								</td>
	  									</tr>
			  							<tr>
			  								<td><label for="ExpiryDate">Expiry Date*</label></td>
			  								<td>
			  									<input id="ExpiryDate" name="ExpiryDate" type="text"/>
			  								</td>
	  									</tr>
	  								</table>
		  						</div>
		  						<div id="AddOrderShipping">
		  							<table>
			  							<tr>
			  								<td>
			  									<fieldset>
			  										<legend>UPS</legend>
			  										<input name="AddOrderShippingMethod" type="radio" value="ups_regular"/>Regular 7 Business Days<br/>
			  										<input name="AddOrderShippingMethod" type="radio" value="ups_express3"/>Express 3 Days<br/>
			  										<input name="AddOrderShippingMethod" type="radio" value="ups_express2"/>Express 2 Days<br/>
			  									</fieldset>
		  									</td>
			  								<td>
			  									<fieldset>
			  										<legend>FedEx</legend>
			  										<input name="AddOrderShippingMethod" type="radio" value="fedex_regular"/>Regular 5 Business Days<br/>
			  										<input name="AddOrderShippingMethod" type="radio" value="fedex_express3"/>Express 3 Days<br/>
			  										<input name="AddOrderShippingMethod" type="radio" value="fedex_express2"/>Express 2 Days<br/>
			  									</fieldset>
		  									</td>
		  								</tr>
			  							<tr>
			  								<td>
			  									<fieldset>
			  										<legend>DHL</legend>
			  										<input name="AddOrderShippingMethod" type="radio" value="dhl_regular"/>Regular 5 Business Days<br/>
			  										<input name="AddOrderShippingMethod" type="radio" value="dhl_express3"/>Express 3 Days<br/>
			  										<input name="AddOrderShippingMethod" type="radio" value="dhl_express2"/>Express 2 Days<br/>
			  									</fieldset>
		  									</td>
			  								<td>
			  									<fieldset>
			  										<legend>Hong Kong Post</legend>
			  										<input name="AddOrderShippingMethod" type="radio" value="hongkongpost_regular"/>Regular 14 Business Days<br/>
			  										<input name="AddOrderShippingMethod" type="radio" value="hongkongpost_express7"/>Express 7 Days<br/>
			  										<input name="AddOrderShippingMethod" type="radio" value="hongkongpost_express3"/>Express 3 Days<br/>
			  									</fieldset>
		  									</td>
		  								</tr>
		  							</table>
		  						</div>
		  						<div id="AddOrderSpecialInstructions">
		  							<textarea id="SpecialInstructions" name="SpecialInstructions" rows="20" cols="156"></textarea>
		  						</div>
		  						<div id="AddOrderNote">
		  							<textarea id="Note" name="Note" rows="20" cols="156"></textarea>
	  							</div>
			  					</form>
		  					</div>
		  				</div>
		  				</td>
	  				</tr>
		  		</table>
		  		<table id="PendingOrderList"></table>
				<div id="PendingOrderListPager"></div>
		  	</div>
		  	<div id="CanceledOrder">
		  		<table id="CanceledOrderList"></table>
				<div id="CanceledOrderPager"></div>
		  	</div>
		  	<div id="CompletedOrder">
		  		<table id="CompletedOrderList"></table>
				<div id="CompletedOrderPager"></div>
		  	</div>
	  	</div>
  	</div>
  	<div id="Product">
	  	<div id="ProductTabs">
		  	<ul>
		  		<li><a href="#Products">Products</a></li>
		  		<li><a href="#Categories">Categories</a></li>
		  	</ul>
		  	<div id="Products">
		  		<table>
		  			<tr>
		  				<td>
		  				<button id="AddProduct">Add</button>
		  				<button id="ImportProduct">Import</button>
		  				<button id="ExportProduct">Export</button><br/>
		  				<div id="AddProductDialog">
		  					<form id="AddProductForm">
		  						<table>
		  							<tr>
		  								<td><label for="Serial">Serial</label></td>
		  								<td><input id="Serial" name="Serial" type="text" size="80" maxlength="500"/></td>
	  								</tr>
		  							<tr>
		  								<td><label for="UPC">UPC</label></td>
		  								<td><input id="UPC" name="UPC" type="text" size="80" maxlength="500"/></td>
	  								</tr>
		  							<tr>
		  								<td><label for="Name">Name*</label></td>
		  								<td><input id="Name" name="Name" type="text" size="80" maxlength="500"/></td>
	  								</tr>
		  							<tr>
		  								<td><label for="Status">Status</label></td>
		  								<td><select id="Status" name="Status">
											<option value="Active">Active</option>
											<option value="Inactive" selected="selected">Inactive</option>
		  								</select></td>
	  								</tr>
		  							<tr>
		  								<td><label for="Price">Price</label></td>
		  								<td><input id="Price" name="Price" type="text" size="12" maxlength="10"/></td>
	  								</tr>
		  							<tr>
		  								<td><label for="UnitDiscount">Unit Discount</label></td>
		  								<td><input id="UnitDiscount" name="UnitDiscount" type="text" size="12" maxlength="10"/></td>
	  								</tr>
		  							<tr>
		  								<td valign="top"><label for="Description">Description</label></td>
		  								<td><textarea id="Description" name="Description" cols="80" rows="14"></textarea></td>
	  								</tr>
	  								<tr>
	  									<td colspan="2">* Mandatory</td>
	  								</tr>
		  						</table>
		  					</form>
		  				</div>
		  				</td>
	  				</tr>
		  		</table>
		  		<table id="ProductList"></table>
		  		<div id="ProductListPager"></div>
		  	</div>
		  	<div id="Categories">
		  		<table>
		  			<tr>
		  				<td><button id="AddCategory">Add</button></td>
	  				</tr>
		  		</table>
		  		Display a list of category.  Can add new, update and remove category for products.
		  		Removing category that has associated products will NOT remove products; associated
		  		products will have no category though.
		  	</div>
	  	</div>
  	</div>
  	<div id="Store">
  		Displays a list of store configurations.  Users can customize the store here including:
  		<ul>
  			<li>Store Hour</li>
  			<li>Close Store</li>
  			<li>Users</li>
  		</ul>
  	</div>
  </div>
  </body>
</html>